import React from 'react';

import { Form, Input, Modal, Select,Radio } from 'antd';



const { Option } = Select;
const FormItem = Form.Item;

export interface UpdateFormProps {
  devicetype: API.DeviceTypeItem[];
  onCancel: () => void;
  onSubmit: (values: API.SysDeviceAlarm) => void;
  updateModalVisible: boolean;

}

const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const [form] = Form.useForm();
  const { updateModalVisible, onSubmit: handleUpdate, onCancel, devicetype } = props;

  

  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    form.resetFields();
    handleUpdate(fieldsValue);
  };


  return (
    <Modal
      width={640}
      maskClosable={false}
      destroyOnClose
      title="编辑报警规则"
      visible={updateModalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <Form
        {...formLayout}
        form={form}
      >
        
         <FormItem
            label="设备类型"
            name="deviceTypeId"
            rules={[{ required: true, message: '请选择设备类型' }]}
          >
            <Select placeholder="请选择">
              {devicetype.map((item) => (
                <Option key={item.typeId} value={item.typeId}>
                  {item.typeName}
                </Option>
            ))}
            </Select>
          </FormItem>
          <FormItem
          label="设备品牌"
          name="deviceBrand"
          rules={[{ message: '请输入至少二个字符！', min: 2 }]}
          >
            <Input placeholder="请输入" autoComplete='off' />
          </FormItem>
          <FormItem
          label="设备型号"
          name="deviceModel"
          rules={[{  message: '请输入至少二个字符！', min: 2 }]}
          >
            <Input placeholder="请输入" autoComplete='off' />
          </FormItem>
         <FormItem
          label="报警级别"
          name="alarmLevel"
          initialValue={802}
        >
           <Radio.Group defaultValue={0}>
            <Radio value={802} >
              报警
            </Radio>
            <Radio value={803}>
              故障
            </Radio>
          </Radio.Group>
        </FormItem>
       
        <FormItem
          label="启用状态"
          name="useState"
          initialValue={1}
        >
          <Radio.Group defaultValue={0}>
            <Radio value={1} >
              启用
            </Radio>
            <Radio value={0}>
              禁用
            </Radio>
          </Radio.Group>
        </FormItem>
        <FormItem
          label="可能原因"
          name="alarmReason"
        >
          <Input.TextArea rows={3}  maxLength={200} placeholder="请输入" />
        </FormItem>
        <FormItem
          label="处理建议"
          name="handleOpinions"
        >
          <Input.TextArea rows={3} maxLength={200} placeholder="请输入" />
        </FormItem>
      </Form>
    </Modal>
  );
};

export default UpdateForm;
